<template>
  <div class="kaitongroot">
    <div>
      <Header :title="title"></Header>
    </div>
    <div class="kaitongbody">
      <div class="k1">
        <ul>
          <li @click="checkhander('1')" :class="{active:curId==='1'}">
            <div>
                <van-checkbox v-model="checked1" checked-color="#ffc71c"></van-checkbox>
            </div>
            <div>月卡 30天</div>
            <p>￥<span>20</span></p>
          </li>
          <li @click="checkhander('2')" :class="{active:curId==='2'}">
            <div>
                <van-checkbox v-model="checked2" checked-color="#ffc71c"></van-checkbox>

            </div>

            <div>季卡 92天</div>
            <p>￥<span>58</span></p>
          </li>
          <li @click="checkhander('3')" :class="{active:curId==='3'}">
            <div>
                <van-checkbox v-model="checked3" checked-color="#ffc71c"></van-checkbox>

            </div>

            <div>年卡 365天</div>
            <p>￥<span>199</span></p>
          </li>
        </ul>
      </div>
      <div class="k2">
        <Lingquan></Lingquan>
      </div>
      <p class="xieyi">
        支付即代表同意<span>《会员服务协议》</span>
      </p>
    </div>

    <div class="pay">
          <button>
            立即支付{{pay}}
          </button>
    </div>
  </div>

</template>

<script >
import Vue from 'vue';
import { Checkbox, CheckboxGroup } from 'vant';

Vue.use(Checkbox);
Vue.use(CheckboxGroup);
import Header from "@/components/header.vue";
import Lingquan from "@/components/lingquan.vue";
export default {
  components: {
    Header,
    Lingquan,
  },
  data() {
    return {
      title: "开通会员",
      curId:'1',
        checked1: true,
        checked2:false,
        checked3:false,
        pay:'￥20'
    
    };
  },
  methods: {
    checkhander(x){
 
        if(x==='1'){
          this.checked1=true;
          this.checked2=false;
          this.checked3=false;
            this.pay='￥20'
        }else if(x==='2'){
          this.checked1=false;
          this.checked2=true;
          this.checked3=false;
            this.pay='￥58'

        }else if(x==='3'){
          this.checked1=false;
          this.checked2=false;
          this.checked3=true;
            this.pay='￥199'

        }
        this.curId=x
    },

  },

};
</script>

<style lang="stylus" scoped>
.active
  border 0.01rem solid #00000000;
  background-color rgba(255, 199, 28, 0.298039215686275)

.kaitongroot {
  // height: 100%;
  // position relative

  .kaitongbody {
    padding: 0 0.12rem;
    height: 100%;
    background-color: rgba(2, 0, 5, 0.06);
    display: flex;
    flex-direction: column;

    .k1 {
      height: 1.76rem;
      background-color: #fff;
      margin: 0 -0.12rem;
      padding: 0 0.12rem;
      overflow: hidden;

      ul {
        margin-top: 0.18rem;
        display: flex;
        justify-content: space-between;
        padding: 0 3.2%;

        li {
          height: 1.36rem;
          width: 31%;
          border-radius: 0.12rem;
          border: 0.01rem solid rgba(255, 199, 28, 1);
          display: flex;
          flex-direction: column;
          text-align: center;
          justify-content space-around
          >div:first-child {
            display: flex;
            justify-content: flex-end;
            padding-right: 0.12rem;
            padding-top: 0.12rem;



            input {
              border-color: rgb(255, 199, 28);
            }
          }
          
        }
      }
    }

          
    .k2 {
      background-color: #fff;
      margin: 0 -0.12rem;
      padding: 0 0.12rem;
      margin-top: 0.12rem;
      display flex 
      flex-direction column
      justify-content space-between
      margin-bottom .9rem
    }
  }
}
.k1>ul>li>div+div
  font-size .16rem
  color #ffc71c 
  font-weight 600  
.k1>ul>li>p
  color #ffc71c 
  margin-top -.12rem
  span
    font-size .4rem 
    font-weight 600
.xieyi
  text-align center
  padding-bottom .1rem
  span 
    color #666EE8
.pay
  width 100%
  height .44rem
  // background-color #fff
  text-align center
  button 
    width 86%
    height .37rem
    border-radius .2rem
    margin-top .06rem
    color white
    background-color rgba(102, 110, 232, 1)
    outline none 
    border 0

</style>